import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import Item from './item';
import { NativeViewGestureHandler } from 'react-native-gesture-handler';
const mapStateToProps = ({ album }) => {
    return {
        list: album.list,
    };
};

const connector = connect(mapStateToProps);


function List(props) {
    const { list, panRef, tapRef, nativeRef, onScrollDrag, onItemPress } = props;
    const onPress = (data, index) => {
        onItemPress(data, index);
    };
    const keyExtractor = (item) => item.id;
    const renderItem = ({ item, index }) => {
        return <Item data={item} index={index} onPress={onPress} />;
    };
    return (
        <NativeViewGestureHandler simultaneousHandlers={panRef} ref={nativeRef} waitFor={tapRef}>
            <Animated.FlatList
                style={styles.container}
                data={list}
                bounces={false}
                renderItem={renderItem}
                keyExtractor={keyExtractor}
                onScrollBeginDrag={onScrollDrag}
                onScrollEndDrag={onScrollDrag}
            />
        </NativeViewGestureHandler>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
    }
})

export default connector(List);
